<template>
  <div class="search">
    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" autocomplete="off"
      clear-trigger="always">
      <template #action>
        <div @click="onCancel" class="writing">取消</div>
      </template>
    </van-search>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { Search as vanSearch } from 'vant'
import { useRouter } from 'vue-router'
import useSearchStore from '@/store/search-searchStore.ts'
import useWhichStore from "@/store/search-whichStore"
import { storeToRefs } from 'pinia'



const router = useRouter()
const value = ref<string>('')
const { search } = storeToRefs(useSearchStore())
const isShow = useWhichStore().displayWhich
const store = useSearchStore()







const onSearch = () => {

  // 添加搜索记录到 会话存储
  if (value.value) {
    sessionStorage.setItem(value.value, value.value)
  }




}
const onCancel = () => {

  // 点击取消后，返回上一个页面
  router.push('/')
}


// 监听输入框中的数据
watch(() => value.value, () => {

  // 使用 pinia，将输入框中的字符串传递到其他需要使用该字符串的组件中
  search.value = value.value

  // 当输入框中的字符串，与数据有匹配的，则会显示 SearchWhich 组件，反之则一直显示SearchHistory
  if (value.value.trim()) isShow(true)
  else isShow(false)
})



// 当点击了 Hot 模块后，将输入框中的数据变成 Hot 模块中的 文字
watch(() => store.search, () => {
  value.value = search.value
})



</script>
<style scoped lang="scss">
.search {
  height: 7vh;

  .writing {
    color: #fb7299;
  }
}
</style>@/store/search-searchStore@/store/search-whichStore